import React, { useEffect, useRef, useCallback } from 'react';
import { createPortal } from 'react-dom';
import './LoginModal.scss';

const LoginModal = (props) => {
  const { children } = props;
  const overlayRef = useRef(null);
  const contentRef = useRef(null);

  // modal 模态框动画对象,透明度从 0-1
  const contentAnimation = [
    { opacity: 0, transform: 'translateY(-50%)' },
    { opacity: 1, transform: 'translateY(-30%)' },
  ];
  // mask 对象对象,透明度从 0 - 1
  const overlayAnimation = [{ opacity: 0 }, { opacity: 1 }];
  // 动画参数配置 （执行事件、填充模式）
  const animationSettings = { duration: 150, fill: 'both' };
  const reverseAnimationSettings = {
    ...animationSettings,
    direction: 'reverse',
  };

  // 动画开始
  const animateIn = useCallback(async () => {
    // 同步执行动画 开启蒙版和dom层
    // 动画效果开发参考：https://blog.csdn.net/weixin_39677027/article/details/112664209
    // animate 接受两个参数
    // 第一个是KeyframeEffects数组，设置你想让动画发生的位置
    // 第二个参数是一个时间函数列表，类似于CSS动画属性，尽管命名稍有不同
    await Promise.all([
      contentRef.current?.animate(contentAnimation, animationSettings),
      overlayRef.current?.animate(overlayAnimation, animationSettings),
    ]);
  }, [animationSettings, overlayAnimation, contentAnimation]);

  // 动画结束
  const animateOut = useCallback(async () => {
    // 同步执行动画 关闭蒙版和dom层
    await Promise.all([
      contentRef.current?.animate(contentAnimation, reverseAnimationSettings).finished,
      overlayRef.current?.animate(overlayAnimation, reverseAnimationSettings).finished,
    ]);
  }, [contentAnimation, overlayAnimation, reverseAnimationSettings]);

  // 判断显隐 当前组件只负责渐隐不负责移除dom，移除 dom 在 Login.jsx 层面
  useEffect(() => {
    if (props.open) {
      animateIn();
    } else {
      animateOut();
    }
  }, [props.open]);

  return createPortal(
    <div className={'Modal_login_mask'} ref={overlayRef}>
      <div className={'Modal_login_content'} ref={contentRef}>
        {children}
      </div>
    </div>,
    document.body
  );
};

export default LoginModal;
